<template>
  <div>
    <div class="filter">
      <div class="filter-type">
        <ul>
          <li @click="active==1 ? active=0 : active=1" :class="active==1 ? 'active':''" >
            <span class="dan">{{level_name}}</span>
            <i class="iconx icon-down"></i>
          </li>
          <li @click="priceorder" :class="(active=='price_desc' ? 'active':'')+(active=='price_asc' ? 'active2':'')" >
            价格
            <div class="iconx icon-downup">
              <i></i>
              <i></i>
            </div>
          </li>
          <li @click="heatorder" :class="(active=='heat_desc' ? 'active':'')+(active=='heat_asc' ? 'active2':'')" >
            热度
            <div class="iconx icon-downup">
              <i></i>
              <i></i>
            </div>
          </li>
        </ul>
      </div>
      <transition name="filter-fade">
        <div class="filter-content" v-show="active==1">
          <div class="filter-content-type">
            <!-- 选中的分类名 -->
            <ul>
              <li
                class="dan"
                v-for="(item, index) in level_position"
                :key="index"
                @click="delLevel(index)"
              >{{level_position_name[index]}}</li>
            </ul>
          </div>
          <div class="filter-content-list">
            <!--分类列表，比对备份数据-->
            <Scroll ref="wrapper1" style="height:300px" :data="level_cur[level-1]">
              <ul>
                <li
                  @click="selLevel()"
                  :style="level_position_bf[level-1]===0 ? 'color:#0088FF;':''"
                >全部</li>
                <li
                  v-for="item in level_cur[level-1]"
                  :key="item.id"
                  @click="selLevel(item.id,item.cate_name)"
                  :style="item.id==level_position_bf[level-1] ? 'color:#0088FF;':''"
                >{{item.cate_name}}</li>
              </ul>
            </Scroll>
          </div>
        </div>
      </transition>
    </div>
    <div class="shadowx" v-show="active==1" @click="active=0"></div>
  </div>
</template>


<script>
import Scroll from "common/Scroll";
import { getCourseCate } from "api/api";
export default {
  props: {},
  data() {
    return {
      active: 0,
      level_name: "全部课程",
      level_all: [], // 所有多级分类 包含层级关系
      level_cur: [], // [ [one]、[two]、[thr]] 最多3级分类 这里写死了
      level_position: [0], // [id,id,id]
      level_position_name: ["分类"], // [name,name,name]
      level_position_bf: [0], // 进来的备份
      level_position_name_bf: ["分类"],
    };
  },
  mounted() {
    this.price_order = null;
    this.heat_order = null;
    this.getCourseCatex();
  },
  computed: {
    level() {
      return this.level_position.length;
    },
  },
  watch: {
    active(newx, oldx) {
      if (oldx === 1) {
        // 判断是否有改变
        let lastbf = this.level_position_bf[this.level_position_bf.length - 1];
        let last = this.level_position[this.level - 1];
        let levelbf = this.level_position_bf.length;
        if ((levelbf == this.level && lastbf == last) || last==-1 ){
          // 不选全默认备份数据，及上一次选择结果，恢复展示
          if( last==-1 ){
            this.level_position=this.level_position_bf.slice();
            this.level_position_name = this.level_position_name_bf.slice();
            this.getlevelCur();
          }
          return;
        }

        // 有改变才体现父组件
        if (last === 0) {
          this.$emit("myChange", {
            level: this.level - 1,
            id: this.level>1 ? this.level_position[this.level-2] : 0, // level!=0
          });
        } else {
          this.$emit("myChange", {
            level: this.level,
            id: this.level_position[this.level - 1],
          });
        }
      } else if (newx == 1) {
        this.level_position_bf = this.level_position.slice();
        this.level_position_name_bf = this.level_position_name.slice();
      }
    }
  },
  methods: {
    heatorder() {
      // 筛选热度或价格其中之一
      this.price_order = null;
      if (this.active == "heat_asc") {
        this.active = "heat_desc";
        this.heat_order = "desc";
      } else {
        this.active = "heat_asc";
        this.heat_order = "asc"; // 刚开始是升序
      }
      this.$emit("myChange", {
        price_order: this.price_order,
        heat_order: this.heat_order,
      });
    },
    priceorder() {
      this.heat_order = null;
      if (this.active == "price_asc") {
        this.active = "price_desc";
        this.price_order = "desc";
      } else {
        this.active = "price_asc";
        this.price_order = "asc";
      }
      this.$emit("myChange", {
        price_order: this.price_order,
        heat_order: this.heat_order,
      });
    },
    getCourseCatex() {
      getCourseCate()
        .then(res => {
          this.level_all = res.data;
          // 第一级不会被更改 先获取
          let level_one = [];
          this.level_all.forEach((item, index, array) => {
            level_one.push({
              id: item.id,
              cate_name: item.cate_name,
              pid: item.pid
            });
          });
          this.level_cur.push(level_one);
        })
        .catch(err => {});
    },

    selLevel(id, name) {
      //只有选择全部 或最后一级 才会发请求
      if (id) {
        this.level_position.splice(this.level-1, 1, id);
        this.getlevelCur();
        // level_position 不能watch，因为紧跟着要执行下面程序
        if (
          this.level_cur[this.level] &&
          this.level_cur[this.level].length > 0
        ) {
          this.level_position.splice(this.level, 1, -1);   // 1
        } else {
          let levelx = this.level===0 ? 0 : this.level -1;
          this.level_position_name[levelx] = name; // 2
          this.level_name=name;
          this.active = 0;
          return;
        }
      } else {
        // 全部，二级分类的全部，id一级分类、level为1 不是2
        this.level_position.splice(this.level -1, 1, 0);  // 3
        this.level_position_name[this.level -1] = "全部";
        this.level_name=this.level-2>=0 ? this.level_position_name[this.level-2] : "全部课程";
        this.active = 0;
      }
    },
    delLevel(index) {
      this.level_position.splice(index, 10, -1);
      this.getlevelCur();
    },

    // 寻找下一级 level_two、level_thr
    getlevelCur() {
      // init
      this.level_cur.splice(1);
      this.level_position_name = ["分类"];

      let level = this.level_position.length;
      if (level > 0) {
        for (let i = 0, j = this.level_all.length; i < j; i++) {
          let item1 = this.level_all[i];
          // 存在下一级
          if (
            this.level_position[0] == item1.id &&
            item1.sub_category.length != 0
          ) {
            this.level_position_name = [item1.cate_name, "分类"];
            this.level_cur.push(item1.sub_category); // 2

            if (level > 1) {
              for (let i = 0, j = item1.sub_category.length; i < j; i++) {
                let item2 = item1.sub_category[i];
                if (
                  this.level_position[1] == item2.id &&
                  item2.sub_category.length != 0
                ) {
                  this.level_position_name = [
                    item1.cate_name,
                    item2.cate_name,
                    "分类"
                  ];
                  this.level_cur.push(item2.sub_category); // 3
                  break;
                }
              }
            }
            break;
          }
        }
      }
    }
  },
  components: {
    Scroll
  }
};
</script>

<style scoped lang="scss">
.shadowx {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
}
.filter {
  z-index: 10;
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0.48rem;
  &-type {
    height: 0.44rem;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      li {
        // flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 33%;
        padding: 0 10px;
        &.active {
          color: #0088ff;
          .icon-down {
            background-image: url("../../assets/images/down2.png");
          }
          .icon-downup {
            i {
              background-image: url("../../assets/images/down3.png");
              &:last-child {
                background-image: url("../../assets/images/down4.png");
                transform: rotate(180deg);
              }
            }
          }
        }
        &.active2 {
          color: #0088ff;
          .icon-downup {
            i {
              background-image: url("../../assets/images/down4.png");
              transform: rotate(0);
              &:last-child {
                background-image: url("../../assets/images/down3.png");
              }
            }
          }
        }
        .iconx {
          position: relative;
          left: 2px;
          flex: none;
        }
        .icon-downup {
          left: 6px;
        }
      }
    }
  }

  &-content {
    // position: absolute;
    // top: 0.44rem;

    width: 100%;
    margin: 0 0.12rem;
    height: 370px;
    overflow: hidden;
    // &.filter-fade-leave-active
    &.filter-fade-enter-active {
      transition: all 0.4s;
    }
    &.filter-fade-enter,
    &.filter-fade-leave-to {
      height: 0;
    }
    ul {
      height: 100%;
      width: 100%;
      display: flex;
    }
    // 多级分类
    &-type {
      height: 0.48rem;
      ul {
        padding: 0 0.08rem;
        border-bottom: 2px solid #f6f6f6;
      }
      li {
        height: 0.2rem;
        line-height: 0.2rem;
        font-size: 14px;
        color: #303133;
        padding: 0.2rem 0.2rem 0.08rem;
        box-sizing: content-box;
        max-width: 0.8rem;
        &.active {
          color: #0088ff;
        }
        &:last-child {
          color: #0088ff;
          position: relative;
          &:after {
            content: "";
            display: block;
            background-color: #0088ff;
            width: 0.18rem;
            height: 1px;
            position: relative;
            bottom: -6px;
            left: 50%;
            transform: translate(-50%, 0);
          }
        }
      }
    }
    // 多级分类列表
    &-list {
      padding: 10px 0;
      ul {
        flex-direction: column;
        padding: 0.08rem 0;
        height: auto;
      }
      li {
        padding: 0.15rem 0.28rem;
        color: #303133;
        font-size: 14px;
      }
    }
  }

  &-shadow {
    background-color: rgba(51, 51, 51, 0.7);
  }
}

.icon-down {
  width: 0.14rem;
  height: 0.14rem;
  background: url("../../assets/images/down1.png") no-repeat center/contain;
  display: inline-block;
}
.icon-downup {
  height: 0.1rem;
  width: 0.06rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  i {
    width: 0.06rem;
    height: 0.04rem;
    background: url("../../assets/images/down3.png") no-repeat center/contain;
    transform: rotate(180deg);
    &:last-child {
      transform: rotate(0);
    }
  }
}
// .tabbarx{

// }
</style>


